//轮播图-初始化插件
var mySwiper = new Swiper('.swiper', {
        autoplay: true, //自动播放

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }, //前进后退键
        pagination: {
            el: '.swiper-pagination', //分页器
            clickable: true, //允许点击
        },
        loop: true, //无线循环
    })
    //apib鼠标移出移入事件
    //获取元素
let li = document.querySelectorAll('.apib li') //颜色
let mouse = document.querySelectorAll('.mouse') //白图片
console.log(mouse);
let mousea = document.querySelectorAll('.mousea') //黑图片
    // 需求1.鼠标移入背景变蓝色
li.forEach(function(v, i) {
    v.addEventListener('mouseover', function() {
        v.style.backgroundColor = 'skyblue'
        this.children[0].children[0].style.display = "block"
            //mouse[i].style.display = 'block'
        mousea[i].style.display = 'none'
    })
});
//需求2.鼠标移出变回去
li.forEach(function(v, i) {
    v.addEventListener('mouseout', function() {
        v.style.backgroundColor = '#fff'
        mouse[i].style.display = 'none'
        mousea[i].style.display = 'block'
    })
});

let on = document.querySelectorAll('.on')

//  需求2.跑马灯思想
//  每隔1000ms,清除上一个图片的激活样式(删除类名active)
// 给下面一个图片添加激活样式(添加类名active)
let index = 0
setInterval(function() {

    //开启计时器
    on[index].classList.remove('active')
        //索引自增
        ++index
        //判断
    if (index === on.length) index = 0
        //给下一个datase-b添加激活样式
    on[index].classList.add('active')

}, 2000)

// 需求回到顶部
//获取元素
let topbtn = document.querySelector('.btn-top')


//滚动距离
window.addEventListener('scroll', function() {
        scrollY = document.documentElement.scrollTop
        if (scrollY >= 600) {
            topbtn.style.display = 'block'
        } else {
            topbtn.style.display = 'none'
        }
    })
    //点击按钮回到顶部
topbtn.addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
})